import { useEffect } from 'react';
import { LinkedinIcon, MailIcon } from 'lucide-react';
import ImageLoader from '../components/UI/ImageLoader';

// Custom X (formerly Twitter) Icon
const XIcon = ({ size = 18, className = "" }) => (
  <svg 
    width={size} 
    height={size} 
    viewBox="0 0 24 24" 
    fill="currentColor" 
    className={className}
    aria-hidden="true"
  >
    <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/>
  </svg>
);

const Team = () => {
  useEffect(() => {
    document.title = 'Our Team | TronoraHub';
  }, []);
  const teamMembers = [{
    name: 'Alex Chen',
    role: 'Editor-in-Chief',
    image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
    bio: 'Alex has been covering consumer technology for over 15 years. Before founding TronoraHub, he was the Senior Technology Editor at TechToday and a contributor to multiple technology publications. He specializes in computing hardware and mobile technology.',
    expertise: ['Computing Hardware', 'Mobile Technology', 'Industry Analysis'],
    social: {
      twitter: '#',
      linkedin: '#',
      email: 'alex@tronorahub.com'
    }
  }, {
    name: 'Sarah Johnson',
    role: 'Senior Editor, Computing',
    image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
    bio: 'Sarah brings a decade of experience in hardware testing and analysis. With a background in computer engineering, she leads our computing coverage with a focus on performance testing and technical deep-dives.',
    expertise: ['PC Hardware', 'Benchmarking', 'Computer Architecture'],
    social: {
      twitter: '#',
      linkedin: '#',
      email: 'sarah@tronorahub.com'
    }
  }, {
    name: 'Michael Wong',
    role: 'Senior Editor, Mobile',
    image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
    bio: 'Michael specializes in smartphone and wearable technology. His background in electrical engineering and user experience design gives him a unique perspective on mobile devices and their ecosystems.',
    expertise: ['Smartphones', 'Wearables', 'Mobile Photography'],
    social: {
      twitter: '#',
      linkedin: '#',
      email: 'michael@tronorahub.com'
    }
  }, {
    name: 'Emma Liu',
    role: 'Senior Editor, Audio & Visual',
    image: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=761&q=80',
    bio: 'Emma has been reviewing audio and display technology for over 8 years. With a background in acoustical engineering and color science, she brings technical precision to our audio and visual coverage.',
    expertise: ['Headphones & Speakers', 'Displays', 'Home Theater'],
    social: {
      twitter: '#',
      linkedin: '#',
      email: 'emma@tronorahub.com'
    }
  }, {
    name: 'Daniel Roberts',
    role: 'News Editor',
    image: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    bio: 'Daniel leads our news coverage, keeping readers informed about the latest developments in the tech industry. His background in journalism and technology policy gives him insight into the broader implications of tech news.',
    expertise: ['Industry News', 'Technology Policy', 'Market Analysis'],
    social: {
      twitter: '#',
      linkedin: '#',
      email: 'daniel@tronorahub.com'
    }
  }, {
    name: 'Priya Sharma',
    role: 'Lab Director',
    image: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80',
    bio: 'Priya oversees our testing lab and develops our testing methodologies. With a PhD in Electrical Engineering and experience in product development, she ensures our technical analysis is rigorous and relevant.',
    expertise: ['Test Development', 'Signal Processing', 'Measurement Systems'],
    social: {
      twitter: '#',
      linkedin: '#',
      email: 'priya@tronorahub.com'
    }
  }];
  return <div className="w-full bg-[#0d0d10] pt-24 pb-16">
      <div className="container mx-auto px-4">
        <h1 className="text-3xl md:text-4xl font-bold font-display mb-6">
          Our Team
        </h1>
        <p className="text-lg text-[#8a8f98] max-w-4xl mb-12">
          Meet the experts behind TronoraHub. Our team combines technical
          expertise, industry experience, and a passion for technology to bring
          you the most thorough and insightful coverage.
        </p>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {teamMembers.map((member, index) => <div key={index} className="card overflow-hidden transition-all hover:shadow-lg hover:shadow-[#4361ee]/10">
              <div className="aspect-[3/4] relative">
                <ImageLoader src={member.image} alt={member.name} className="w-full h-full" />
              </div>
              <div className="p-6">
                <h2 className="text-xl font-bold mb-1">{member.name}</h2>
                <p className="text-[#4361ee] text-sm mb-4">{member.role}</p>
                <p className="text-[#e0e0e0] text-sm mb-4">{member.bio}</p>
                <h3 className="text-sm font-medium mb-2">Expertise:</h3>
                <div className="flex flex-wrap mb-6">
                  {member.expertise.map((skill, i) => <span key={i} className="text-xs bg-[#151518] text-[#8a8f98] px-3 py-1 rounded-full mr-2 mb-2">
                      {skill}
                    </span>)}
                </div>
                <div className="flex items-center space-x-4">
                  <a href={member.social.twitter} className="text-[#8a8f98] hover:text-[#4361ee]" aria-label={`${member.name}'s X (formerly Twitter)`}>
                    <XIcon size={18} />
                  </a>
                  <a href={member.social.linkedin} className="text-[#8a8f98] hover:text-[#4361ee]" aria-label={`${member.name}'s LinkedIn`}>
                    <LinkedinIcon size={18} />
                  </a>
                  <a href={`mailto:${member.social.email}`} className="text-[#8a8f98] hover:text-[#4361ee]" aria-label={`Email ${member.name}`}>
                    <MailIcon size={18} />
                  </a>
                </div>
              </div>
            </div>)}
        </div>
      </div>
    </div>;
};
export default Team;